import {designPage} from "plain-design-composition"
import {PlcAddress, PlcCheckbox, PlcDate, PlcImage, PlcInput, PlcNumber, PlcOv, PlcSelect, PlcTextarea, PlIcon, PlSelectOption, PlTablePro, useTableOption} from "plain-design";
import React from "react";

export default designPage((props) => {

    const option = useTableOption({
        url: '/demo',
        fill: true,
        sort: {field: 'createdAt', desc: true},
        bodyRowHeight: 70,
    })

    return () => <>
        <div style={{height: '100%', boxSizing: 'border-box', backgroundColor: 'white'}}>
            <PlTablePro option={option}>
                <PlcDate title="创建时间" field="createdAt" hideInForm width={200} editable={false} datetime/>
                <PlcDate title="更新时间" field="updatedAt" hideInForm width={200} editable={false} datetime/>
                <PlcDate title="日期" field="dateVal"/>
                <PlcNumber title="计数count" field="count" required/>
                <PlcImage title="图片" field="imageId" fixed="left" onUploadSuccess={({row, response}) => row.imageId = response.data.path}/>
                <PlcInput title="文本normalText" field="normalText" required fixed="left" onClick={({scope}) => props.nav.push('list/pro-table-detail', scope.row)} link/>
                <PlcNumber title="数字numberVal" field="numberVal"/>
                <PlcCheckbox title="复选框flag" field="flag"/>
                <PlcSelect title="下拉框selectVal" field="selectVal">
                    <PlSelectOption label="消费者" val="consumer">
                        <PlIcon icon="el-icon-s-custom" status="primary" style={{marginRight: '4px'}}/>
                        <span>消费者</span>
                    </PlSelectOption>
                    <PlSelectOption label="潜在客户" val="potential">
                        <PlIcon icon="el-icon-place" status="info" style={{marginRight: '4px'}}/>
                        <span>潜在客户</span>
                    </PlSelectOption>
                    <PlSelectOption label="门店" val="store">
                        <PlIcon icon="el-icon-s-shop" status="error" style={{marginRight: '4px'}}/>
                        <span>门店</span>
                    </PlSelectOption>
                </PlcSelect>
                <PlcTextarea title="长文本longText" field="longText"/>
                <PlcAddress title="省" field="provinceVal" province/>
                <PlcAddress title="市" field="cityVal" parentField="provinceVal" city/>
                <PlcAddress title="区" field="districtVal" parentField="cityVal" district/>
                <PlcOv title="选项值" field="ovVal" ov="promotion"/>
            </PlTablePro>
        </div>
    </>
})
